<template>
   <div class="bigbox">
      <div class="loginhead">
        <h1>这是标题</h1>
      </div>
      <div class="loginbody clearfix">
        <div class="loginimg">
          <img src="../assets/backimg.png" alt="">
        </div>
         <div class="loginBox">
          <div class="loginBoxHead">
            <span>登录</span>
          </div>
          <div class="loginBoxBody">
                <el-form ref="form" :model="loginform" class="container" :rules="myrules">
                  <el-form-item>
                  </el-form-item>

                  <el-form-item prop="username">
                    <!-- <el-input v-model="loginform.username" placeholder="请输入用户名"></el-input> -->
                    <input type="text" v-model="loginform.username" placeholder="请输入用户名" class="loginInput" >
                  </el-form-item>

                  <el-form-item prop="userpassword">
                    <!-- <el-input v-model="loginform.userpassword" placeholder="请输入密码" type="password"></el-input> -->
                    <input type="password" v-model="loginform.userpassword" placeholder="请输入密码" class="loginInput" @keyup.enter="onLogin('form')" >
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click.native="onLogin('form')"  class="login-btn">登录</el-button>
                  </el-form-item>

                </el-form>
          </div>
      </div>
      </div>
   </div>
</template>

<script>
import { getLoginPic } from "@/api"
export default {
  data () {
    return {
      loginform: {
        username: '',
        userpassword: ''
      },
      myrules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        userpassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onLogin (form) {
      let obj = { 
        phone: this.loginform.username,
        password: this.loginform.userpassword
      }
      if(obj.phone == '' || obj.password == '' ) {
          this.$message.error('请填写完整用户名和密码');
          return false;
      }
      localStorage.setItem('user', obj.phone)
      getLoginPic(obj)
      .then(res => {
        // console.log(res.data)
        if(res.statusCode === 200) {
          //let sha256 = require("js-sha256").sha256//这里用的是require方法
          //let thisdata = sha256(res.data)//要加密的密码
          localStorage.setItem('userData',res.data)
          localStorage.setItem('userToken',res.token)
          this.$message({
          message: '登录成功',
          type: 'success'
        });
          this.$router.push({path: '/home'})
        } else {
           this.$message.error('用户名或密码错误');
          console.log("err")
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
    .bigbox {
      width: 100%;
      height: 100%;
    //   background-color: #93d6ec;
      // background-image: url(../assets/loginbox.png);
      background-color: #93d7ee;
      // position: relative;
    }
    .loginhead {
      padding-top: 30px;
      h1 {
        width: 247px;
        height: 46px;
        background-image: url(../assets/sixlogo.png);
        margin-left: 50px;
        
        font-size: 0;
      }
    }
    .loginbody{
      width: 1400px;
      margin: 0 auto;
    }
    .clearfix:after,.clearfix:before{ content: "";display: table;}
    .clearfix:after{ clear:both;}
    .clearfix{zoom:1;}
    .loginBox {
      float: right;
     margin-top: 16%;
      width:413px;
      height:392px;
      border-radius:15px;
      background-color: #fff;
      .loginBoxHead {
        text-align: center;
        padding-top: 20px;
        span {
          display: block;
          width:42px;
          margin: auto;
          font-size: 15px;
          line-height: 30px;
          border-bottom: 3px solid #4083E7;
        }
      }
    }

    .loginimg {
      float: left;
      // margin-left: 130px;
      margin-top: 80px;
    }

    .loginBoxBody {
      padding: 0 43px;
      padding-top: 30px;
      box-sizing: border-box;
    }

    .loginInput {
      width: 100%;
      height: 58px;
      font-size: 16px;
      text-indent: 10px;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      color: #BBBBBB;
      outline: none;
    }

    .el-button {
      width: 100%;
      height: 58px;
    }

    
</style>
